<template>
  <div>
    组件通讯：<br><br>
    父传子
    <br />
    一.props<br>
    1.首先在子组件标签中写入 :toSon1="fatherMsg" <br>
    2.在子组件写入 props 接受 父组件传递过来的值
    <son-1 :toSon1="fatherMsg"></son-1>
    <br />
    二.ref <br>
    1.通过按钮 设置一个事件方法 在方法里写入this.$refs.toSon2.getMessage('携带的参数')<br>
    2.在组件标签中写入ref="toSon2"<br>
    3.在子组件中接受来自父组件传递过来的方法getMessage(‘携带的参数’) <br>
    这个<button @click="toSon2Btn">按钮</button>可以给son2传递一个值
    <son-2 ref="toSon2"></son-2>

    <br>
    <br>
    <br>
    子传父<br>
    一.$emit 事件传递<br>
    1.首先在子组件里面写入事件方法 触发事件 this.$emit('son3Msg',this.msg) （son3Msg为给父组件事件 this.msg为携带的参数）<br>
    2.在组件标签中中写入 @son3Msg="son3Msg1" （son3Msg1是在父亲组件用于触发 son3Msg用于接收）<br>
    <son-3 class="test" @son3Msg="son3Msg1"></son-3>{{getSon3Msg}}
    <br>
    <br>
    二.$parent <br>
    直接在子组件写  this.$parent.getSon4Msg
    <son-4></son-4>{{getSon4Msg}}

    <br>
    <br>
    <br>
    兄弟组件通讯<br>
    一.发布订阅<br>
    1.按照pubsub-js组件库:npm i  pubsub-js <br>
    2.在发布方，订阅方引入import pubsub from 'pubsub-js' <br>
    3.发布方: pubsub.publish('hello',666) <br>
    4.订阅方: this.pubId = pubsub.subscribe("hello", function (message,data) {} <br>
    5.订阅方: pubsub.unsubscribe(this.pubId) <br>
    我在这里准备发布一条消息 <el-button @click="shoot">发布消息</el-button>
    <son-5></son-5>
  </div>
</template>

<script>
import son1 from './communication/son1.vue'
import son2 from './communication/son2.vue'
import son3 from './communication/son3.vue'
import son4 from './communication/son4.vue'
import son5 from './communication/son5.vue'

import pubsub from 'pubsub-js' //发布订阅
export default {
  name: "",
  components: {
    son1,
    son2,
    son3,
    son4,
    son5,
  },
  data() {
    return {
      fatherMsg:'我是父组件值,通过props的方法传递给子组件',
      getSon3Msg:'',
      getSon4Msg:''
    }
  },
  created() {
    // this.$refs.toSon2.getMessage('父组件传给我的值')
  },
  methods: {
    //父组件传递给子组件ref方法
    toSon2Btn() {
      this.$refs.toSon2.getMessage('父组件传给我的值')
    },

    //子组件给父组件传值$emit方法
    son3Msg1(msg) {
      this.getSon3Msg = msg
    },

    //$parent方法
    son4Fun() {
      console.log(111);
    },


    //发布订阅
    shoot() {
      //pubsub.js
      pubsub.publish('hello',666)
      //通过pubsub.js二次封装的
      $bus.emit("a","我是a事件")
      //手写的发布订阅
      this.$bus.$emit("sendTitle","雷磊宇宙无敌帅")
    }
  }
  
};
</script>

<style scoped>
.test {
  display: inline-block;
}
</style>
